<template>
  <view class="container">
    <u-form :model="formData" :rules="rules" ref="formRef">
      <!-- 分组容器增加卡片效果 -->
      <view class="form-card">
        <u-form-item label="原密码" prop="oldPassword" label-width="100" borderBottom>
          <u-input 
            placeholder="请输入当前密码" 
            v-model="formData.oldPassword" 
            password 
            clearable
            :border="false"
          />
        </u-form-item>
        
        <u-form-item label="新密码" prop="newPassword" label-width="100" borderBottom>
          <u-input 
            placeholder="3-12位字符，区分大小写" 
            v-model="formData.newPassword" 
            password 
            clearable
            :border="false"
          />
        </u-form-item>
        
        <u-form-item label="确认密码" prop="confirmPassword" label-width="100">
          <u-input 
            placeholder="请再次输入新密码" 
            v-model="formData.confirmPassword" 
            password 
            clearable
            :border="false"
          />
        </u-form-item>
      </view>
    </u-form>

    <!-- 底部操作按钮 -->
    <view class="footer">
      <u-button 
        type="primary" 
        shape="circle" 
        @click="submitForm"
        :loading="loading"
      >确认修改</u-button>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { changePasswordApi } from '@/api/user.js'

const formRef = ref(null)
const loading = ref(false)

const formData = reactive({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

const rules = {
  oldPassword: {
    required: true,
    message: '请输入当前密码',
    trigger: ['blur']
  },
  newPassword: {
    required: true,
    validator: (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入新密码'));
      } else if (value.length < 3 || value.length > 12) {
        callback(new Error('密码长度3-12位'));
      } else {
        callback();
      }
    },
    trigger: ['blur']
  },
  confirmPassword: [
    {
      required: true,
      validator: (rule, value, callback) => {
        if (!value) {
          callback(new Error('请确认新密码'));
        } else if (value.length < 3 || value.length > 12) {
          callback(new Error('密码长度3-12位'));
        } else {
          callback();
        }
      },
      trigger: ['blur']
    },
    {
      validator: (rule, value, callback) => {
        return value === formData.newPassword 
          ? callback() 
          : callback(new Error('两次输入密码不一致'));
      },
      trigger: ['blur', 'change']
    }
  ]
}

const submitForm = () => {
  formRef.value.validate().then(async () => {
    loading.value = true
    try {
		console.log(formData)
      const res = await changePasswordApi({
        userId: uni.getStorageSync('userId'),
        oldPassword: formData.oldPassword,
        newPassword: formData.newPassword
      })
      
      uni.showToast({
        title: res.code === 200 ? '修改成功' : res.msg || '修改失败',
        icon: res.code === 200 ? 'success' : 'none'
      })
      
      if (res.code === 200) {
        setTimeout(() => uni.navigateBack(), 1500)
      }
    } finally {
      loading.value = false
    }
  })
}
</script>
<style lang="scss" scoped>
.container {
  padding: 30rpx;
  min-height: 100vh;
  background-color: #f7f7f7;
  box-sizing: border-box;
}

.form-card {
  background: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
}

.u-form-item {
  padding: 0 30rpx;
  
  &--border::after {
    left: 30rpx;
    right: 30rpx;
  }
}

.footer {
  padding: 60rpx 30rpx 0;
  
  .u-button {
    height: 90rpx;
    font-size: 32rpx;
  }
}

/* 修正后的深度选择器写法 */
:deep(.u-input__content__field-wrapper) {
  border: none !important;
}
</style>